<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="查评事件" prop="reviewEvents">
          <el-select v-model="queryParams.reviewEvents" placeholder="请选择查评事件" style="width: 230px;" clearable filterable>
            <!-- 使用 v-for 循环渲染选项 -->
            <el-option
              v-for="option in reviewEventsOptions"
              :key="option.id"
              :label="option.review_events"
              :value="option.review_events"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查评要素" prop="evaluationElements">
          <el-input
            v-model="queryParams.evaluationElements"
            placeholder="请输入查评要素"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="评审状态" prop="reviewStatus">
          <el-select
            v-model="queryParams.reviewStatus"
            class="full-width-input"
            clearable
          >
            <el-option label="未评审" value="未评审"></el-option>
            <el-option label="已评审" value="已评审"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组员" prop="member">
          <el-input
            v-model="queryParams.member"
            placeholder="请输入组员"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="dateRange"
            style="width: 240px"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-download" size="mini" type="success" @click="exportWord">小结</el-button>
          <el-badge :value="number" class="item" style="margin-left: 10px">
            <el-button size="mini" type="warning" style="display: flow-root;" @click="queryState">未评审</el-button>
          </el-badge>
          <el-button style="margin-left: 10px" icon="el-icon-refresh-left" size="mini" @click="backUp" plain>返回</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="gropingList" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" type="index" width="50" align="left" header-align="left"/>
        <el-table-column label="查评要素" align="left" prop="evaluationElements" :width="250"  :show-overflow-tooltip="true" class="el-tooltip__popper">
          <template slot-scope="scope">
            <a @click.prevent="handleLinkClick(scope.row)" style="color: #409eff">
              {{ scope.row.evaluationElements }}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="组长" align="left" prop="groupLeader" />
        <el-table-column label="组员" align="left" prop="member" />
        <el-table-column label="评审状态" align="left" prop="reviewStatus" header-align="left">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.reviewStatus === '已评审' ? 'success' : (scope.row.reviewStatus === '未评审' ? 'danger' : 'warning')"
            >
              {{ scope.row.reviewStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="评审事件" align="left" prop="reviewEvents" :width="300"/>
        <el-table-column label="扣分" align="left" prop="deduct"/>
        <el-table-column label="得分" align="left" prop="score"/>
        <el-table-column label="创建人" align="left" prop="createByName" />
        <el-table-column label="创建时间" align="left" prop="createTime" />
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.reviewStatus !== '标题'"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="review(scope.row)"
              v-hasPermi="['system:groping:updateGropingById']"
            >评审</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import {
    listGroping,
    getGroping,
    delGroping,
    addGroping,
    updateGroping,
    listGropingByProject,
    getReviewEvents,
    getReviewEventsFist
  } from '@/api/system/review/groping'
  import {summaryExport,eventTitle} from "@/api/system/review/event";
  import {inspectionReport} from "@/api/system/review/event";
  
  export default {
    name: "Groping",
    data() {
      return {
        number: 0,
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        reviewStatus: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 查评分组表格数据
        gropingList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          reviewEvents: 1,
          groupName: undefined,
          groupLeader: undefined,
          groupLeaderCode: undefined,
          score: undefined,
          member: undefined,
          memberCode: undefined,
          creationDate: undefined,
          isDelete: undefined,
          taskAllocation: undefined,
          evaluationElements: undefined,
          standardScore: undefined,
          reviewStatus: undefined,
          reviewEventsId: undefined,
          evaluationElementsId: undefined,
          refId: undefined,
          picture: undefined,
          examinerCode: undefined,
          examiner: undefined,
          isApply: undefined,
          lookWorkCase: undefined,
          evaluateCase: undefined,
          isInnovate: undefined,
          evaluateObject: undefined,
          backingMaterial: undefined,
          lookPapersCase: undefined,
          deduct: undefined,
          isProblem: undefined,
          problem: undefined,
          isGreatProblem: undefined,
          rectifySuggest: undefined,
          scenePhoto: undefined,
          reviewStandard: undefined,
          scoreStandard: undefined,
          deptCode: undefined,
          deptName: undefined,
          responsibleCode: undefined,
          responsibleName: undefined,
          requireOkTime: undefined,
          okTime: undefined,
          requireSituation: undefined,
          okPhoto: undefined,
          deductPursuant: undefined,
        },
        reviewEventsOptions: [],// 用于存储后台返回的查评事件选项
        isReview : true,
        // 表单参数
        form: {},
        dateRange: [],
        // 表单校验
        rules: {
          id: [
            { required: true, message: "主键id不能为空", trigger: "blur" }
          ],
          reviewEvents: [
            { required: true, message: "查评事件不能为空", trigger: "blur" }
          ],
          groupName: [
            { required: true, message: "小组名称不能为空", trigger: "blur" }
          ],
          groupLeader: [
            { required: true, message: "组长不能为空", trigger: "blur" }
          ],
          groupLeaderCode: [
            { required: true, message: "组长编号不能为空", trigger: "blur" }
          ],
          member: [
            { required: true, message: "成员不能为空", trigger: "blur" }
          ],
          memberCode: [
            { required: true, message: "成员编号不能为空", trigger: "blur" }
          ],
          creationDate: [
            { required: true, message: "创建日期不能为空", trigger: "blur" }
          ],
          isDelete: [
            { required: true, message: "是否删除不能为空", trigger: "blur" }
          ],
          taskAllocation: [
            { required: true, message: "任务分配不能为空", trigger: "blur" }
          ],
          evaluationElements: [
            { required: true, message: "查评要素不能为空", trigger: "blur" }
          ],
          standardScore: [
            { required: true, message: "标准分不能为空", trigger: "blur" }
          ],
          reviewStatus: [
            { required: true, message: "评审状态不能为空", trigger: "change" }
          ]
        },
      };
    },
    beforeRouteEnter(to, from, next) {
      if(from.path == '/review/localEvaluation/projectEvalutionForm' && !to.query.queryParams) {
        to.query.queryParams = from.params.queryParams
      }
      next();
    },
    beforeRouteLeave(to, from, next){
      console.log('44444444444',to)
      next();
    },
    created() {
      // 接收数据合并至搜索表单
      console.log('000',this.queryParams.pageSize)
      this.$route.query.queryParams.pageNum = this.queryParams.pageNum
      this.$route.query.queryParams.pageSize = this.queryParams.pageSize

      this.queryParams = Object.assign(this.queryParams,this.$route.query.queryParams)
      //日期回显
      if (undefined!= this.$route.query.time){
        this.dateRange = Object.values(this.$route.query.time);
        // this.dateRange = this.$route.query.time;
      }
      this.getList();
      // 在组件加载后，请求后台接口获取下拉框数据
      this.fetchReviewEventsData();
    },
    methods: {
      /** 查询查评分组列表 */
      getList() {
        this.queryParams.reviewEvents = this.$route.query.item.eventTitle
        this.loading = true;
        this.queryParams.createBy =''
        listGropingByProject(this.addDateRange(this.queryParams, this.dateRange,)).then(response => {
          this.number =response.count;
          this.gropingList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          reviewEvents: undefined,
          groupName: undefined,
          groupLeader: undefined,
          groupLeaderCode: undefined,
          member: undefined,
          memberCode: undefined,
          creationDate: undefined,
          isDelete: undefined,
          taskAllocation: undefined,
          evaluationElements: undefined,
          standardScore: undefined,
          reviewStatus: undefined,
          reviewEventsId: undefined,
          evaluationElementsId: undefined,
          refId: undefined,
          picture: undefined,
          examinerCode: undefined,
          examiner: undefined,
          isApply: undefined,
          lookWorkCase: undefined,
          evaluateCase: undefined,
          isInnovate: undefined,
          evaluateObject: undefined,
          backingMaterial: undefined,
          lookPapersCase: undefined,
          deduct: undefined,
          isProblem: undefined,
          problem: undefined,
          isGreatProblem: undefined,
          rectifySuggest: undefined,
          scenePhoto: undefined,
          reviewStandard: undefined,
          scoreStandard: undefined,
          deptCode: undefined,
          deptName: undefined,
          responsibleCode: undefined,
          responsibleName: undefined,
          requireOkTime: undefined,
          okTime: undefined,
          requireSituation: undefined,
          okPhoto: undefined,
          deductPursuant: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      queryState(){
        if (this.queryParams.reviewStatus == undefined){
          this.queryParams.reviewStatus = '未评审';
        }else {
          this.queryParams.reviewStatus = undefined;
        }
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.queryParams = this.$options.data().queryParams
        this.dateRange = [];
        this.handleQuery();
      },
      /** 小结按钮操作 */
      exportWord(){
        if (this.queryParams.reviewEvents == undefined || this.queryParams.reviewEvents == ''){
          return this.$message.warning("请先选择查评事件");
        }
        if (this.queryParams.member == undefined || this.queryParams.member == ''){
          return this.$message.warning("请先输入组员");
        }
        this.$modal.loading("导出中")
        let data = {
          userName :this.queryParams.member,
          reviewEvents : this.queryParams.reviewEvents
        }
        //获取文件名称
        eventTitle(this.queryParams.reviewEvents).then((res) =>{
          //导出
          summaryExport(data).then((response) => {
            if (response.size == 0){
              this.$modal.closeLoading();
              return this.$message.warning("该人员无评审数据");
            }
            this.$modal.closeLoading();
            let data = new Blob([response], { type: 'application/msword;charset=utf-8' });
            if (typeof window.chrome !== 'undefined') {
              // chrome
              const link = document.createElement('a');
              link.href = window.URL.createObjectURL(data);
              link.download = res+'.docx';
              link.click();
            } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
              // IE
              const blob = new Blob([data], {type: 'application/force-download'});
              window.navigator.msSaveBlob(blob,res+'.docx');
            } else {
              // Firefox
              const file = new File([data], res+'.docx', {type: 'application/force-download'});
              window.open(URL.createObjectURL(file));
            }
          });
        });
      },
      // 返回上一级
      backUp(){
        this.$router.push({
        path: "/review/localEvaluation/projectEvalutionListNew",
      });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加查评分组";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.loading = true;
        this.reset();
        const id = row.id || this.ids
        getGroping(id).then(response => {
          this.loading = false;
          this.form = response.data;
          this.open = true;
          this.title = "修改查评分组";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateGroping(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addGroping(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除查评分组编号为"' + ids + '"的数据项？').then(() => {
          this.loading = true;
          return delGroping(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/groping/export', {
          ...this.queryParams
        }, `groping_${new Date().getTime()}.xlsx`)
      },
      /** 操作列-评审 */
      review(row) {
        this.$router.push({
          path: "/review/localEvaluation/projectEvalutionForm",
          query: { row: row, queryParams: this.queryParams },
        });
      },
      // 请求后台接口获取查评事件数据
      fetchReviewEventsData() {
        getReviewEvents().then(response => {
          this.reviewEventsOptions = response.data;
          // this.getFist();
        }).finally(() => {
        });
      },
      handleLinkClick(row){
        this.$router.push({
          path: "/review/localEvaluation/projectEvalutionForm",
          query: { row: row,evalution: 1,queryParams: this.queryParams},
        });
      },
      getFist(){
        getReviewEventsFist().then(response => {
          console.log(response)
          this.queryParams.reviewEvents = response.msg;
        }).finally(() => {
        });
      }
    }
  };
  </script>
  
  <style>
  .el-tooltip__popper{
    max-width:30%;
    padding-bottom: 5px!important;
    display: -webkit-box;overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;
  }.el-tooltip__popper,.el-tooltip__popper.is-dark{background:rgb(48, 65, 86) !important;color: #fff !important;line-height: 24px;}
  </style>
  